<template>
  <lay-container fluid="true" style="padding: 10px;height: 100%;overflow-y: hidden">

    <div class="maintable-box"  >

      <lay-table
          :height="'100%'"
          :default-toolbar="defaultToolbar"
          :columns="columns"
          :dataSource="dataSource"
          v-model:expandKeys="expandKeys"
          :rowClassName="rowClassName"

          @row="rowClick"
          @Change="pageChange"
          @sortChange="sortChange"
      >

        <template v-slot:pid="{ data }">
          <div v-show="data.lx=='Dev'">{{data.did}}</div>
          <div v-show="data.lx=='Prop'">{{data.pid}}</div>
        </template>
        <template v-slot:sv="{ data }">
          <a href="javascript:;" class="myhref" v-if="data.type==20||data.type==30||data.type==40"
                 @click="toQst(data)"
              >{{data.sv}}</a>
          <div v-html="data.sv" v-if="data.type!=20&&data.type!=30&&data.type!=40"></div>
        </template>
        <template v-slot:operator="{ }">

        </template>
        <template v-slot:scope="{data }">
          <div v-if="data.scope!=''">[{{ data.scope }}]</div>
            {{ data.unit }}
        </template>
      </lay-table>

    </div>

  </lay-container>
</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";
import MyWin from "../../library/MyWin";
import MyPage from "../../library/MyPage";
import {DateUtil} from "../../library/DateUtil";
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport";
import MyData from "@/library/MyData";

import qst from "./qst.vue"

export default {

  props:{
    id:String
  },

  setup(prop:any, context:any) {

    const baseUrl="/commdevice";
    const baseQUrl=baseUrl+"/PropTree";
    const pageName="设备属性";

    const myWin=ref<any>(null);
    const selectedKey = ref<any>("")
    const selectedKeys = ref<any>([])
    const defaultToolbar = ref(false)
    const page = ref(  new MyPage()  );

    const columns = [

      // {
      //   title: '选择',
      //   width: '50px',
      //   type: 'radio',
      //   fixed: 'left'
      // },
      // {
      //   title: '序号',
      //   width: '50px' ,
      //   key: 'rowNo'
      // },
      { key:'pid',title: '编号', width: '60px',
        customSlot: 'pid',
      },
      { key:'name',title: '名称', width: '100px', },
      { key:'sv',title: '检测值', width: '100px',
          customSlot: 'sv',
      },
      { key:'state',title: '状态', width: '100px', },
      { key:'scope',title: '范围', width: '100px', 
      customSlot: 'scope',
      },
      
      { key:'crtDt',title: '更新时间', width: '100px', },


    ]

    const dataSource = ref([]);

    const rowClick = function (data: any) {
      selectedKey.value=data.id;
    }

    const rowDoubleClick = function (data: any) {}

    const pageChange = function ({ current, limit }: any) {
      if(qm.pageSize!=limit)
      {
        qm.pageSize=limit ;
        qm.page=1;
        query(1);
      }else{
        query(current)
      }


    }
    function toSearch() {
      query(1);
    }

    function toReset() {
      qm.key= '';
      qm.dtb=DateUtil.todayStr();
      qm.dte=DateUtil.todayStr();
    }

    const qm=reactive({
      id:prop.id,
      key:"",
      dtb:DateUtil.todayStr(),
      dte:DateUtil.todayStr(),
      page: 1,
      pageSize: 10,
      sortFields:"id desc"
    });
    const query=async (pageIndex:number) =>{




      if(pageIndex){
        page.value.current=pageIndex;
        qm.page=pageIndex;
      }

      var r=await new MyHttp().list(baseQUrl,qm,
          {
          },
          columns
      );
      dataSource.value=r.data;
      expandKeys.value=MyData.getTreeIds( dataSource.value) ;
     // page.value.total=r.data.totalRow;
    }


    const sortChange = (key: any, sort: number) => {
      qm.sortFields=`${key} ${sort}`;
      query(0);
    }
    const tableExport=async()=>{

      var cols=columns as Array<TableColumn>;
      new MySimpleExport().exportExcel(
          {
            qm,
            url:baseQUrl,
            name:pageName,
            columns:cols,
            lx:"page"
          }
      );
    }


    const rowClassName=(row:any, rowIndex:number):string=>{
      if(row.lx=="Dev"){ 
        return "layui-table-header";        //RowSelected
      }else if(row.state=="故障"){ 
        return "GZ";        //RowSelected
      }else if(row.state=="一级报警"){ 
        return "YJBJ";        //RowSelected
      }else if(row.state=="二级报警"){ 
        return "EJBJ";        //RowSelected
      }
      else{
        return "";
      }
    }
    const toSubmit=(event:any)=>{
      console.info(event)
    }
    const expandKeys=ref<any>([]);

    const toQst=(data:any)=>{
      var opt={
        title: `趋势图:${data.name}`,
        content: h( qst,
            {
               id:data.id,
              onOk:(data:any)=>{
              }
            }
        ),
        area: ['1600px','900px']
      };
      myWin.value.open(opt );
    }

    onMounted(() =>{
      myWin.value=new MyWin();
      query(1);
    });
    return {
      columns,
      dataSource,
      selectedKey,
      selectedKeys,
      defaultToolbar,
      page,
      rowClick,
      rowDoubleClick,
      pageChange,
      toReset,
      toSearch,
      expandKeys,


      qm,
      query,

      sortChange,
      tableExport,

      myWin,
      rowClassName,
      toSubmit,
      toQst,

    }
  }
}
</script>
<style  scoped >

.maintable-box{
  height: calc(100% - 20px);

}

</style>